<template>
    <div class="base-layout">
        <div class="w-100% h-40px bg-#f0f0f0 flex items-center color-#606266 p-[0_20px]">
            <i v-if="back" @click="backHandle" class="i-ep-arrow-left-bold color-#dcdfe4 cursor-pointer text-22px"></i>
            <div class="pl-10px">
                <slot name="title">{{ title }}</slot>
            </div>
        </div>
        <div class="bg-#f9f9f9 flex-1 min-h-0 w-100%   p-10px overflow-auto">
            <slot></slot>
        </div>
        <div v-if="showAction" class="bg-#fafbff h-60px w-100% flex justify-end items-center p-[0_20px]">
            <el-button size="large" @click="backHandle">取消</el-button>
            <el-button type="primary" size="large" @click="submitHandle">提交</el-button>
        </div>
    </div>
</template>

<script setup>
defineProps({
    title: {
        type: String
    },
    back: {
        type: Boolean,
        default: true
    },
    showAction: {
        type: Boolean,
        default: true
    }
})
const emits = defineEmits(['back', 'submit'])

const backHandle = () => {
    emits('back')
}
const submitHandle = () => {
    emits('submit')
}
</script>

<style lang="scss" scoped>
.base-layout {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

</style>